<template>
  <div class="monitor_page">
    <!-- 绘图部分 -->
    <div class="tabBox">
      <el-tabs type="border-card" class="tabsBoxs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label=" 地下水位" name="shuiwei">
          <el-card shadow="hover" class="card_echarts">
            <echarts-five-change ref="echartsChange"></echarts-five-change>
          </el-card>
        </el-tab-pane>

        <el-tab-pane label="数据表格" name="table">
          <el-card class="card_echarts" shadow="hover">
            <table-all ref="tableAll"></table-all>
          </el-card
          >
        </el-tab-pane>
      </el-tabs>

    </div>

    <x-loading v-show="isLoading"></x-loading>

  </div>
</template>

<script>
  import {searchRecord} from "@/services/model/appList";
  import Format from '@/utils/format'
  import EchartsFiveChange from '../../monitor-echarts/app/echarts-5-app'
  import XLoading from '@/components/animation/x-loading.vue'
  import TableAll from '../../monitor-echarts/tablesAll'

  const Base64 = require('js-base64').Base64
  export default {
    components: {EchartsFiveChange, XLoading,TableAll},
    data() {
      return {
        isLoading: false,
        activeName: "shuiwei",
        // 当前的图表钩子
        chartsName: ['echartsChange'],
      };
    },


    methods: {
      //tab 切换进行echart随着窗口改变方法，让数据重新渲染，
      handleClick(tab, event) {
        this.chartsName.map((name) => {
          if (this.$refs[name]) {
            this.$nextTick(() => {
              this.$refs[name].echartResize();
            });
          }
        });
      },
      // 数据刷新
      async showDialog(token, pointName,holeDepth) {
        let holeDepths=Number(holeDepth)
        this.isLoading = true
        const {data} = await searchRecord({
          token
        });
        if(this.$refs.tableAll){
          this.$nextTick(()=>{
            this.$refs.tableAll.upDateTable(data,5)
          })
        }
        this.$refs.echartsChange.updateEchart(data, pointName,holeDepths)
        this.isLoading = false
      },
    },
    mounted() {
      //http://192.168.41.117:8080/5Mini?token=eyJtb25pdG9yVHlwZSI6NSwicG9pbnRJZCI6IjE0NTg3MTM5MTkzNTkxNTIxMzAiLCJlbmRDcmVhdGVUaW1lIjoiMTYzMTg2NzU1NzAwMCIsInN0YXJ0Q3JlYXRlVGltZSI6IjE2MjkyNzU1NTYwMDAifQ%3D%3D&pointName=静力水准&holeDepth=108
      let str = decodeURIComponent(this.$route.fullPath)
      let strs = str.slice(6)
      let a = strs.split("&")
      let token
      let pointName
      let holeDepth
      for (let i = 0; i < a.length; i++) {
        token = a[0].slice(7)
        pointName = a[1].slice(10)
        holeDepth=a[2].slice(10)
      }
      this.showDialog(token, pointName,holeDepth)
    },
  };
</script>

<style scoped="scoped" lang="less">
  @import url("../commom.less");

  .monitor_page {
    width: 100vw;
    height: 100vh;

  }

  .tabsBoxs {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  // 还需自定义的css
  .card_echarts {
    width: 100vw;
    height: 96vh;
    /*transform: rotate(90deg);*/
  }

  .tabBox {
    width: 100vw;
    height: 100vh;


  }

</style>
